<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
	<script src="js/dataTool.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var data = [
			[850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
			[960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
			[880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
			[890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
			[890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
		];
		//[14,6,3,2,4,15,11,8,1,7,2,1,3,4,10,22,20]
		/* var arr=[14,6,3,2,4,15,11,8,1,7,2,1,3,4,10,22,20];
		var newArr=arr.sort(function(a,b){
			return a-b;
		});
		console.log(newArr); */

		data=echarts.dataTool.prepareBoxplotData(data);
		console.log(data);


		var myChart = echarts.init(document.getElementById('chart'));
		myChart.setOption({
			title:[
				{
					text:'Michelson-Morley Experiment',
					left:'center',
				},
				{
					text:'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
					borderWidth:1,
					borderColor:'#999',
					textStyle:{
						fontSize:14,
					},
					left:'10%',
					top:'90%',
				}
			],
			grid:{
				left:'10%',
				right:'10%',
				bottom:'15%',
			},
			xAxis:{
				data:data.axisData,
				axisLabel:{
					formatter:'expr {value}',
				}
			},
			yAxis:{
				name:'km/s minus 299,000',
				splitArea:{
					show:true,
				}
			},
			tooltip:{
			},
			series:[
				{
					name:'boxplot',
					type:'boxplot',
					data:data.boxData,
					tooltip:{
						formatter:function(param){
							//console.log(param);
							return [
								'Experiment '+param.name+': ',
								'upper: '+param.data[5],
								'Q3: '+param.data[4],
								'median: '+param.data[3],
								'Q1: '+param.data[2],
								'lower: '+param.data[1],
							].join('<br/>');
						}
					}
				},
				{
					name:'outlier',
					type:'scatter',
					data:data.outliers
				}
			]
		});
	</script>
</body>

</html>